<template>
  <!--最外层-->
    <div class="firstdiv">
      <div style="background-color: #fffcfa;padding-bottom: 10px">
      <!--最上层-->
      <div class="creditsExchange-left-title">
        <h2>{{pageTitle}}</h2>
      </div>
      <div class="creditsExchange-title-line"></div>
      <div class="creditsExchange-left-title">
        <h4>兑换礼品心愿单</h4>
      </div>
      <!--中间层姓名查询h和提交日期查询-->
      <div class="mian">
        <div class="nameSearch">
          <el-radio v-model="radio" label="1" size="medium">按人员名称查询</el-radio>
          <el-input placeholder="按人员名称查询"prefix-icon="el-icon-search" v-model="byNameSearch" @input="selectWishListByPeopleName
"></el-input>
        </div>
        <div class="nameSearch">
          <el-radio v-model="radio" label="2">按提交日期查询</el-radio>
          <el-date-picker v-model="submitData" type="date" placeholder="选择日期" @change="selectWishListBySubmitData"></el-date-picker>
        </div>
      </div>
      <!--表格-->
      <div>
        <el-table :data="tableData" border style="width: 98%;margin:0 1%" height="500" v-loading="loadingBoolean"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading">
          <el-table-column fixed="left"
                           label="操作"width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="pimary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="submitnum" label="心愿单编号" width="180" ></el-table-column>
          <el-table-column prop="userName" label="提交人" width="180"></el-table-column>
          <el-table-column prop="deptName" label="所属支部"></el-table-column>
          <el-table-column prop="submittime" label="提交日期"></el-table-column>
          <el-table-column prop="submitsumintegral" label="心愿单总积分"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div style="width: 100%;text-align: center;margin: 5px auto ">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <!-- 积分兑换弹窗 -->
      <div>
        <el-dialog title="礼品兑换" :visible.sync="dialogGiftVisible" :before-close="closeGiftDialog" width="60%">
          <div>
            <el-table :data="gridData">
              <el-table-column property="giftnum" label="礼品编号"></el-table-column>
              <el-table-column property="giftname" label="礼品名称" ></el-table-column>
              <el-table-column property="giftintegral" label="积分"></el-table-column>
              <el-table-column property="giftstatus" label="礼品状态"></el-table-column>
              <el-table-column property="exchangeNum" label="兑换数量">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-input v-model="scope.row.exchangenum" placeholder="请输入兑换数量" type="number" @input="getThisTableValue(scope.row)"
                    :disabled="scope.row.giftflag === 1"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="integralComputation">
            <div>总积分: <span>{{integralnow}}</span></div>
            <div>本次总计花费积分: <span>{{integralTotal}}</span></div>
            <hr>
            <div>本次扣减积分: <span>{{integralTotal}}</span></div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeGiftDialog">取 消</el-button>
            <el-button type="primary" @click="submitGiftDialog">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      </div>
    </div>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    import util from '../../../../Js/utils.js'
    export default {
        name: '',
        components: {},
        data () {
            return {
//                页面标题
              pageTitle:'礼品管理',
//              按名字查询
              byNameSearch:'',
//              按提交日期查询
              submitData:'',
//              加载框
              loadingBoolean:false,
//            当前页
              currentPage1: 1,
//            每页显示几条
              pageSize: 10,
//            总条目数
              total: 0,
              msg: '这个是Home模板页',
              radio: '1',
//              主表单数据列表
              tableData: [],
              tableDataChecked:null,
//              弹窗相关
              dialogGiftVisible:false,
              gridData: [],
//              提交人员的信息
              integralnow:0,
              integralTotal:0,
              partymemberid:null,
              userOtherInfo:null
            }
        },
        created(){
              this.selectWishListByDeptId(this.currentPage1)
        },
        methods: {
//            根据组织id查询信息
          selectWishListByDeptId(pageNum){
              this.currentPage = pageNum;
            let params = {
                  pageNum:pageNum,pageSize:this.pageSize
            };
              this.loadingBoolean = true;
            this.$http.post(
                this.$BASE_URL+'wish/selectbydeptid',
              params,{emulateJSON:false}
            ).then(res => {
//                console.log(res);
              let list = res.data.list;
              this.tableData = list;
              this.loadingBoolean = false
            },res => {
                console.error(res);
              this.loadingBoolean = true
            })
          },
//            用户在输入框输入兑换数量,获取该条数据兑换所需积分
          getThisTableValue(oneTableData){
              let thisGiftNum = Number(oneTableData.exchangenum);
              if (thisGiftNum < 0){
                  this.$message.error('操作错误,兑换数量不能为负');
                return;
              }
              this.gridData[oneTableData.index].exchangenum = thisGiftNum;
            this.totalConversionPoints()
          },
//          计算兑换总积分
          totalConversionPoints(){
              let gridData = this.gridData;
              let deleteTotal = 0;
            for(let i = 0; i < gridData.length; i++){
              deleteTotal+= Number(gridData[i].giftintegral)*Number(gridData[i].exchangenum)
            }
            this.integralTotal = deleteTotal;
          },
//            查看表单数据
          handleClick(e){
            this.tableDataChecked = e;
            this.selectUserSubmitWish(e.id);
            this.dialogGiftVisible = true
          },
          // 根据心愿单编号查询礼品列表
          selectUserSubmitWish(id){
            this.$http.post(
                this.$BASE_URL+'wish/selectbysubmitid',
              {pageNum:1,pageSize:100000,id:id},{emulateJSON:false}
            ).then(res => {
                console.log(res);
              let resCode = res.data.code;
              let output = res.data.output;
              if (resCode === 200){
                let list = output.info.list;
                 // 列表
                for(let i = 0; i < list.length; i++){
                  if (list[i].giftflag === 0) {
                    list[i]['giftstatus'] = '展示中'
                  } else if (list[i].giftflag === 1) {
                    list[i]['giftstatus'] = '已下架'
                  }
                  list[i]['exchangenum'] = 0;
                  list[i]['index'] = i
                }
                this.gridData = list;
                this.integralnow = output.integral.integralnow;
                this.partymemberid = output.integral.partymemberid
//                this.userOtherInfo = {
//                  dept: output.dept,integral:output.integral,user:output.user
//                }
              }else {
                this.$message.error(res.data.resMessage)
              }
            },res => {
                console.error(res);
              this.$message.error(res.data.resMessage)
            })
          },
//          弹窗关闭
          closeGiftDialog(e){
            this.$confirm('确认关闭？')
              .then(_ => {
                this.dialogGiftVisible = false
                done();
              })
              .catch(_ => {
              });

          },
//          弹窗内容提交
          submitGiftDialog(e){
              console.log('tableDataChecked',this.tableDataChecked);
            console.log('gridData',this.gridData);
            let gridData = this.gridData,list = [];
            for(let i = 0; i < gridData.length; i++){
                list.push({
                  giftid:gridData[i].id,
                  count:gridData[i].exchangenum
                })
            }
            let params = {
                submitid:this.tableDataChecked.id,
              partymemberid:this.partymemberid,
              list:list
            };
            this.$http.post(
                this.$BASE_URL+'wish/exchange',
              (params),{emulateJSON:true}
            ).then(res => {
              console.log(res);
              let resCode = res.data.code;
              if(resCode === 200){
                  this.$message.success('礼品兑换'+res.data.resMessage);
                  this.selectWishListByDeptId(this.currentPage);
                this.dialogGiftVisible = false
              }else {
                  this.$message.error(res.data.resMessage)
              }
            },res =>{
                  console.error(res);
              this.$message.error(res.data.resMessage)
            })
          },
//          分页
          handleCurrentChange(e){
            this.selectWishListByDeptId(e)
          },
//          根据人员名称查询
          selectWishListByPeopleName(searchValue){
            this.loadingBoolean = true;
              this.$http.post(
                  this.$BASE_URL+'wish/selectbylike',
                {partyMemberName:searchValue},{emulateJSON:false}
              ).then(res => {
                let resCode = res.data.code;
                let output = res.data.output;
                if(resCode === 200){
                  this.tableData = output;
                  this.loadingBoolean = false
                }else{
                  this.$message.error(res.data.resMessage);
                  this.loadingBoolean = false
                }
              },res => {
                this.loadingBoolean = false;
                this.$message.error(res.data.resMessage)
              });
          },
//          根据提交日期查询
          selectWishListBySubmitData(changeData){
            let userChangeDate = util.formatTime(changeData);
            let reqDate = userChangeDate.split(' ')[0];
            this.loadingBoolean = true;
              this.$http.post(
                  this.$BASE_URL+'wish/selectbydate',
                {date:reqDate},{emulateJSON:false}
              ).then(res=>{
                  let resCode = res.data.code;
                  if(resCode === 200){
                    this.tableData = res.data.output
                  }else{
                    this.$message.error(res.data.resMessage)
                  }
                this.loadingBoolean = false
              },res => {
                  console.error(res);
                this.$message.error(res.data.resMessage);
                this.loadingBoolean = false
              })
          }
        }
    }
</script>
<style lang="postcss" scoped>
  .firstdiv{
    width:100%;
    height:100%;
    background-color: #fffcfa;
  }
  .creditsExchange-left-title{
    text-align: left;
    padding: 10px 20px;
  }
  .creditsExchange-title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
  .mian{
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width:90%;
  }
  .nameSearch{
    display: flex;
    text-align: left;
    margin:0 20px 20px 20px;
  }
  .integralComputation{
    width:60%;
    margin:20px 20%;
    font-size: 16px;
    color: #292929;
    line-height: 30px;
  }
</style>
